@extends('layouts.app')

@section('title', '书籍详情')

@section('header')
    @include('layouts.header-two')
@stop

@section('content')
    <div class="details">
        <div class="container">
            <div class="details-content">
                <ol class="details-page">
                    @foreach($categoryNav as $key => $item)
                        <li><a href="{{ route('productIndex', ['category_id' => $item['id']]) }}">{{ $item['title'] }}</a></li>
                    @endforeach
                </ol>
                <div class="details-slider">
                    <div class="row">
                        <div class="col-md-4">
                            <div id="carousel" class="carousel slide" data-ride="carousel">
                                <div class="carousel-inner" role="listbox">
                                    @if($product->cover)
                                        @foreach($product->cover as $key => $value)
                                            <div class="item @if($key == 0) active @endif">
                                                <img src="{{ asset('uploads/' . $value) }}" alt="">
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                                <ol class="carousel-indicators">
                                    @if($product->cover)
                                        @foreach($product->cover as $key => $value)
                                            <li data-target="#carousel" data-slide-to="{{ $key }}" @if($key == 0) class="active" @endif>
                                                <img src="{{ asset('uploads/' . $value) }}" alt="">
                                            </li>
                                        @endforeach
                                    @endif
                                </ol>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="details-slider-r">
                                <h3>{{ $product->name }}</h3>
                                <div class="declare">
                                    <span class="author">作者：<i>{{ $product->author }}</i><i></i></span>
                                    <span class="publish-name">出版社：<i>{{ $product->press }}</i></span>
                                    @foreach($product->resources as $key => $resource)
                                        <img src="{{ asset('uploads/' . $resource->icon_url) }}" alt="{{ $resource->name }}" />
                                    @endforeach
                                </div>
                                <a href="{{ $product->buy_link }}" class="buy-btn">立即购买</a>
                                @if($product->remark && $product->remark != 'None')
                                    <span class="remarks">备注：{{ $product->remark }}</span>
                                @endif
                                <div class="table-responsive">
                                    <table class="table">
                                        @if($product->details->is_game != 1)
                                        <tr>
                                            <td>适用年龄段：</td>
                                            <td>{{ $product->details->grade }}</td>
                                            <td>ISBN：</td>
                                            <td>{{ $product->details->isbn }}</td>
                                        </tr>
                                        <tr>
                                            <td>包装：</td>
                                            <td>{{ $product->details->package }}</td>
                                            <td>页数：</td>
                                            <td>{{ $product->details->pages }}</td>
                                        </tr>
                                        <tr>
                                            <td>开本：</td>
                                            <td>{{ $product->details->format }}</td>
                                            <td>出版时间：</td>
                                            <td>{{ $product->details->date }}</td>
                                        </tr>
                                        <tr>
                                            <td>用纸：</td>
                                            <td>{{ $product->details->material }}</td>
                                            <td>定价：</td>
                                            <td>￥{{ $product->details->priced }}</td>
                                        </tr>
                                        @else
                                            <tr>
                                                <td>开发者：</td>
                                                <td>{{ $product->details->package }}</td>
                                                <td>出版社：</td>
                                                <td>{{ $product->details->material }}</td>
                                            </tr>
                                            <tr>
                                                <td>适用年龄段：</td>
                                                <td>{{ $product->details->grade }}</td>
                                                <td>ISBN：</td>
                                                <td>{{ $product->details->isbn }}</td>
                                            </tr>
                                            <tr>
                                                <td>出版时间：</td>
                                                <td>{{ $product->details->date }}</td>
                                                <td>类型：</td>
                                                <td>{{ $product->details->format }}</td>
                                            </tr>
                                        @endif
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="probation">
                    <div class="title">
                        <h3>内容试读</h3>
                        <p>Preview</p>
                        <div class="line1"></div>
                    </div>

                    @if($product->pictures)
                    <div class="pic-probation">
                        <div id="achievement-carousel" class="carousel slide achievement-carousel" data-pause="false">
                            <div class="carousel-inner" role="listbox">
                                @foreach($product->pictures as $key => $picture)
                                    @if($key % 4  == 0)
                                        <div class="item @if ($key == 0)active @endif">
                                            <div class="row">
                                                @endif
                                                <div class="col-md-3">
                                                    <div class="achievement-img"><img src="{{ asset('uploads/' . $picture) }}" alt="" /></div>
                                                </div>
                                                @if($key % 4  == 3 || count($product->pictures) == $key+1)
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                            <a class="left carousel-control" href="#achievement-carousel" role="button" data-slide="prev">
                                <i class="carousel-icon-left"></i>
                            </a>
                            <a class="right carousel-control" href="#achievement-carousel" role="button" data-slide="next">
                                <i class="carousel-icon-right"></i>
                            </a>
                        </div>
                    </div>
                    @endif

                    @if($product->tryout_audio && $product->tryout_audio->tryout)
                    <div class="audio">
                        <div class="row">
                            <div class="col-md-1">
                                <div class="audio-img">
                                    @if($product->tryout_audio->cover)
                                        <img src="{{ asset('uploads/' . $product->tryout_audio->cover) }}" alt="">
                                    @else
                                        <img src="{{ asset('statics/images/icon_picfour_newbook.jpg') }}" alt=""/>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-7">
                                <h4>{{ $product->tryout_video->title }}</h4>
                                <p>格式：{{ pathinfo($product->tryout_audio->tryout, PATHINFO_EXTENSION) }}</p>
                            </div>
                            <div class="col-md-4">
                                <div class="audio-tab">
                                    <audio id="myaudio">
                                        <source src="{{ asset('uploads/' . $product->tryout_audio->tryout) }}">
                                        您的浏览器不支持播放此格式音频。
                                    </audio>
                                    <div class="controls clearfix">
                                        <div class="play-pause f_left" id="playPause">
                                            <i class="icon-btn icon-play"></i>
                                        </div>
                                        <span class="played-time f_left">00:00</span>
                                        <div class="pgs f_left">
                                            <div class="pgs-play" id="progress"></div>
                                            <img src="{{ asset('statics/images/icon_frequency_bookdetailpage.jpg') }}" alt="">
                                        </div>
                                        <span class="audio-time f_left" id="audioTime">0</span>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                    @endif

                    @if($product->tryout_video)
                    <div class="video">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="video-description">
                                    <h4>视频</h4>
                                    <h5>Video</h5>
                                    <p>视频可试看前2分钟</p>
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="video-tab">
                                    @if($product->tryout_video->tryout)
                                        <video id="myvideo" controls width="100%" height="422">
                                            <source src="{{ asset('uploads/' . $product->tryout_video->tryout) }}">
                                            您的浏览器不支持播放此格式视频。
                                        </video>
                                        @if($product->tryout_video->cover)
                                            <img id="videoImg" src="{{ asset('uploads/' . $product->tryout_video->cover) }}" alt="" />
                                        @endif
                                        <div id="videoShadow"></div>
                                        <i class="videoPlay" id="videoPlay"></i>
                                    @else
                                    {!! $product->tryout_video->external !!}
                                    {{--<!-- <!-----------if no video-----------> -->--}}
                                    {{--<div class="noVideoTab">--}}
                                        {{--<div class="noVideo">--}}
                                            {{--<p><i></i>暂无视频资源</p>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    <div class="symmary">
                        <h4>内容简介</h4>
                        <div class="symmary_content">
                            <p>
                                {!! $product->introduce !!}
                            </p>
                        </div>
                    </div>
                    <div class="symmary recomment">
                        <h4>编辑推荐</h4>
                        <div class="symmary_content">
                            {!! $product->recommend !!}
                        </div>
                    </div>
                </div>
            </div>
            @if(!empty($sameGradeBooks))
            <div class="same-grade">
                <div class="titles">
                    <h2></h2>
                    <div class="pageCount"><span class="index">1</span>&nbsp;/&nbsp;<span class="total">2</span></div>
                </div>
                <div class="same-grade-slide">
                    <div id="same-grade-carousel" class="carousel slide same-grade-carousel" data-ride="carousel">
                        <div class="carousel-inner" role="listbox">
                            @foreach($sameGradeBooks as $key => $sameGradeBook)
                                @if ($key % 5 == 0)
                                    <div class="item @if($key == 0)active @endif">
                                        @endif
                                        <a target="_blank" href="{{ route('productInfo', ['uuid' => $sameGradeBook->uuid]) }}" class="item-box">
                                            <div class="achievement-img"><img src="@if($sameGradeBook->cover){{ asset('uploads/' . $sameGradeBook->cover[0]) }}@endif" alt="" /></div>
                                            <p>{{ $sameGradeBook->name }}</p>
                                        </a>
                                        @if($key % 5 == 4)
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <a class="left carousel-control" href="#same-grade-carousel" role="button" data-slide="prev">
                            <i class="carousel-icon-left"></i>
                        </a>
                        <a class="right carousel-control" href="#same-grade-carousel" role="button" data-slide="next">
                            <i class="carousel-icon-right"></i>
                        </a>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
@stop

@section('footer')
    @include('layouts.footer')
@stop

@section('script')
    <script src="{{ asset('statics/js/video.js') }}" ></script>
    <script>
        $(".join-ls").height($(".join-rs").height());
        $(function(){
            $hoder = $('#same-grade-carousel').find('.item');
            $(".total").text($hoder.length)
            $('#same-grade-carousel').on('slide.bs.carousel', function (event) {
                var $items = $(event.relatedTarget);
                //getIndex就是轮播到当前位置的索引
                var getIndex= $hoder.index($items);
                $(".index").text(getIndex+1);
            })
        })

        //--------------------试读图片放大---------------------//
        $(".achievement-carousel .achievement-img").each(function(){
            $(this).click(function(){
                var bigImg="<div class='bgImgTab' id='bgImgTab'><div class='bgImgLay'></div><img src='' alt='' /></div>",
                    s=$(this).find("img").attr("src");
                $(".details").append(bigImg);
                $(".bgImgTab img").attr("src",s);
                $(".bgImgTab img").on("load",function(){
                    var w=$(".bgImgTab img").width(),
                        h=$(".bgImgTab img").height(),
                        l=w/2,
                        t=h/2;
                    $(".bgImgTab img").css({"margin-left":-l+"px","margin-top":-t+"px"});
                });
                $('body').css({"overflow-x":"hidden","overflow-y":"hidden"});
            })
        });
        $("body").on("click","#bgImgTab",function(){
            $(this).remove();
            $('body').css({
                "overflow-x":"auto",
                "overflow-y":"auto"
            });
        })
    </script>
@stop